<template>
	<div>
		<div style="margin: 10px 20px">
			<el-row>
				<el-col :span="3">
					<h2>报修任务单</h2>
				</el-col>
				<el-col :span="21" style="margin-top: 22px">
					<el-select v-model="value" placeholder="选择楼栋" style="width: 240px" clearable @change="changeVal">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-col>
			</el-row>
		</div>
		<el-row>
			<el-col :span="24">
				<el-button type="success" disabled style="width: 150px; height: 50px; margin: 10px 20px"
					>未完成任务单
					<span style="color: red">
						{{ sum }}
					</span>
				</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column fixed prop="declare_state" label="状态" width="250" />
					<el-table-column prop="declare_content" label="详情" width="220" />
					<el-table-column prop="room" label="房间" width="120" />
					<el-table-column prop="declare_time" label="提交时间" width="220" />
					<el-table-column prop="username" label="提交人" width="200" />
					<el-table-column prop="declare_type" label="申报类型" width="120" />
					<!-- <el-table-column prop="declare_state" label="状态" width="120" /> -->
					<el-table-column fixed="right" label="操作" width="200" >
						<template  v-slot:default="scope">
							<!-- <el-button link type="primary" size="small" @click="handleClick(scope.row.id)"> 安排 </el-button> -->
							<!-- <el-button link type="primary" size="small">Edit</el-button> -->
                            <div v-if="scope.row.declare_state === '暂未处理'">
								<el-button link type="primary" size="small" @click="handleClick(scope.row.id)">处理</el-button>
							</div>
							<div v-else>
								<el-button link type="primary" :disabled="true" size="small">已处理</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { onMounted } from "vue";
import { ref } from "vue";
import { getDelare ,getDeclareInfo,getDelareUpdate} from "@/api/admin/home";
const value = ref("");
const sum = ref();
const tableData = ref();
const options = ref([
	{
		label: "龙门客栈",
		value: "龙门客栈",
		id: "538150-546-a237-3f21-f6ec3cec3ab1"
	},
	{
		label: "博贤楼",
		value: "博贤楼",
		id: "538150-546-a237-3f21-f6ec3cec3ab0"
	}
]);
const getWeiInfo = async () => {
	try {
		let values = options.value.filter(it => it.name === value.value);
		console.log(values[0]?.id);
		return;
		const res = await getDelare(values[0]?.id);
		if (res.data.code === 200) {
			sum.value = res.data.data.filter(it => it.declare_state === 1);

			// dataList.value[3].name='待处理';
			// dataList.value[3].sum=sum.length;
		}
	} catch (error) {
		console.log(error);
	}
};
const changeVal = async value => {
	try {
		let values = options.value.filter(it => it.value === value);
      
		const res = await getDelare(values[0]?.id);
        const res1 = await getDeclareInfo(values[0]?.id);
		if (res.data.code === 200) {
			let arr = res.data.data.filter(it => it.declare_state === 1).length;
			sum.value = arr;
            // tableData.value = arr;
			// console.log(arr)
			// dataList.value[3].name='待处理';
			// dataList.value[3].sum=sum.length;
		}
        if(res1.data.code === 200){
            console.log(res1)
            let arr = res1.data.data.map(it=>{
                return{
                    id:it.declare_id,
                    declare_state:it.declare_state === 1 ? '暂未处理' : '已处理',
                    declare_content:it.declare_content,
                    room:it.room,
                    declare_time:it.declare_time,
                    username:it.username,
                    declare_type:it.declare_type === 1 ? '普通报修' : '紧急报修',
                    // declare_state:it.declare_state === 1 ? '未处理' : '已处理'
                }
            })
            
            if(arr.length > 0){
                tableData.value =arr;
				
            }else{
                tableData.value = []
            }
            
        }
	} catch (error) {
		console.log(error);
	}
};
// 处理报修
const handleClick =async (id) => {
    const res = await getDelareUpdate(id)
    if(res.data.code === 200){
        ElNotification({
			message: "操作成功",
			type: "success",
			duration: 3000
		});
    }else{
        ElNotification({
			message: "操作失败",
			type: "error",
			duration: 3000
		});
    }
}
onMounted(() => {
	getWeiInfo();
});
</script>

<style scoped></style>
